<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-05-18 17:59:31
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-05-19 12:11:03
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24" class="tit-container">
            <div class="task-title">模型注册</div>
            <div>
                <el-button type="primary" :icon="Plus">
                    新建模型
                </el-button>
            </div>
        </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" :border="true" :stripe="true" height="600">
        <el-table-column prop="number" label="序号" :align="'center '" width="80" />
        <el-table-column label="模型名称" :align="'center'">
            <template #default="scope">
                {{ scope.row.modelName }}
            </template>
        </el-table-column>
        <el-table-column prop="modelType" label="模型类型" :align="'center '" />
        <el-table-column prop="modelFile" label="执行程序" :align="'center'">
            <template #default="scope">
                <div class="file-name-container">
                    <el-text class="file-name" type="primary">
                        <el-icon>
                            <SwitchFilled />
                        </el-icon>
                        {{ scope.row.modelFile }}
                    </el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注" :align="'center'" />
        <el-table-column label="操作" width="200" :align="'center'" fixed="right">
            <template #default="scope">
                <el-button link type="primary" size="small" :icon="Edit">
                    编辑
                </el-button>
                <el-button link type="danger" size="small" :icon="Delete">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang="ts" setup>
import { Plus, Edit, Delete, SwitchFilled } from '@element-plus/icons-vue'
const tableData = [
    {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    }, {
        number: '1',
        modelName: '地物遥感分类',
        modelType: '地物反演',
        modelFile: '07公司产品',
        desc: '高分辨率1m,2m'
    },
]
</script>
<style lang="scss" scoped>
.tit-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;

    .task-title {
        font-size: 18px;
        font-weight: 600;
        font-family: 'Courier New', Courier, monospace
    }
}

.file-name-container {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .file-name {
        margin-left: 5px;
    }
}
</style>
<style lang="scss"></style>